<template>
  <div>
    <el-popover
      placement="bottom"
      width="540"
      trigger="click">
      <div class="content" >
        <div class="item" >
          <span style="color: #999999">1、模板下载</span>
          <el-image class="itme-img"  :src="wordImg" ></el-image>
          <!--        <div style="margin-bottom:14px"><icon class="el-icon-document"></icon><span>企业成交模板</span></div>-->
          <el-button size="mini" type="primary" @click="downloadDataReq">点击下载</el-button>
        </div>
        <div class="item" >
          <span style="color: #999999">2、表格上传</span>
          <el-image class="itme-img"  :src="excelImg"></el-image>
          <div v-if="fileListVisible" style="margin-bottom:14px"><icon style="margin-right: 5px" class="el-icon-document"></icon><span>{{fileName}}</span></div>
          <div style="display: flex;justify-content: space-around">
            <el-upload
              ref="uploadRef"
              :action="uploadUrl()"
              :headers="uploadHeader()"
              :on-success="uploadSuccess"
              :on-change="uploadChange"
              :on-exceed="uploadExceed"
              :on-error="uploadError"
              accept=".xlsx,.xls"
              :show-file-list="false">
              <el-button size="mini" slot="trigger" >{{isReupload ? '重新上传' : '上传'}}</el-button>
            </el-upload>
            <el-button size="mini" style="margin-left: 24px" type="primary" @click="clickUpload">导入</el-button>
          </div>
        </div>
      </div>
      <el-button :class="[type === 2 ? 'btn-normal' : 'btn-small']" slot="reference" :size="type === 2 ? '' : 'mini'"  type="primary" icon="el-icon-download" >批量导入</el-button>
    </el-popover>
    <el-dialog
      title="数据导入返回结果"
      :visible.sync="resultDialogVisible"
      width="30%"
    center>
      <div class="consequence">
        <div class="consequence-s">
          <div>
            <i class="el-icon-success chenggong" ></i>{{successAmount}}条记录导入成功
          </div>
        </div>
        <div class="consequence-e">
          <div>
            <i class="el-icon-error shibai" ></i>{{failAmount}}条记录导入失败
          </div>
        </div>
      </div>
      <div>
        <el-table
          :data="resultData"
          :header-cell-style="{'text-align':'center','background':'#F5F7FA'}"
          :cell-style="{'text-align':'center'}">
            <el-table-column label="序号" prop="indexNum"></el-table-column>
            <el-table-column label="名称" prop="content"></el-table-column>
            <el-table-column label="失败原因" prop="remark"></el-table-column>
        </el-table>
      </div>
      <span slot="footer" class="dialog-footer">
    <el-button @click="resultDialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="clickHideResultDialog">确 定</el-button>
  </span></el-dialog>
  </div>
</template>

<script>
import {isAuth} from '../../../../utils'
import Vue from 'vue'
import {batchSave, cooperationBatchSave} from '../../../../api/customer/enterprise'
import wordImg from '../../../../assets/img/word.png'
import excelImg from '../../../../assets/img/excelImport1.png'

export default {
  name: 'BatchImport',
  props: {
    // 0为个人,1为企业,2为合作记录, 3为区域名单,导出的位置
    type: {
      type: Number,
      default: 0
    },
    // 客户类型 1为成交客户 ，2为意向客户 ， 3为一般客户
    customerType: {
      type: Number,
      default: 0
    },
    customerId: {
      type: Number,
      default: null
    }
  },
  created () {
  },
  data () {
    return {
      fileListVisible: false,
      fileName: '',
      excelData: [],
      isReupload: false,
      successAmount: 0,
      failAmount: 0,
      resultData: [],
      wordImg,
      excelImg,
      resultDialogVisible: false,
      uploadResult: {}
    }
  },
  methods: {
    isAuth (auth) {
      return isAuth(auth)
    },
    setResult ({data}) {
      // console.log('data', data)
      this.successAmount = data.successAmount
      this.failAmount = data.failAmount
      this.resultData = data.resultInfoList
      this.resultDialogVisible = true
    },
    clickUpload () {
      if (this.fileName === '') {
        this.$message.warning('请先上传文件！')
      } else {
        if (this.type === 0) {
          // 个人
          if (this.customerType === 1) {
            // 个人成交
            batchSave(
              {
                'typeId': 1,
                'enterpriseFlag': 0,
                'customerInfoList': this.excelData
              },
              (data) => {
                this.setResult(data)
              })
          } else if (this.customerType === 2) {
            // 个人意向
            batchSave(
              {
                'typeId': 2,
                'enterpriseFlag': 0,
                'customerInfoList': this.excelData
              }, (data) => {
              this.setResult(data)
            })
          }
        } else if (this.type === 1) {
          // 企业
          if (this.customerType === 1) {
            // 企业成交
            batchSave(
              {
                'typeId': 1,
                'enterpriseFlag': 1,
                'customerInfoList': this.excelData
              }, (data) => {
              this.setResult(data)
            }
            )
          } else if (this.customerType === 2) {
            // 企业意向
            batchSave(
              {
                'typeId': 2,
                'enterpriseFlag': 1,
                'customerInfoList': this.excelData
              }, (data) => {
              this.setResult(data)
            }
            )
          }
        } else if (this.type === 2) {
          // 合作记录
          cooperationBatchSave(
            {
              'customerId': this.customerId,
              'cooperationList': this.excelData
            }, (data) => {
            this.setResult(data)
          }
          )
        } else if (this.type === 3) {
          // 区域名单
          batchSave(
            {
              'typeId': 3,
              'enterpriseFlag': 1,
              'customerInfoList': this.excelData
            }, (data) => {
            this.setResult(data)
          }
          )
        }
      }
    },
    uploadSuccess (response, file, fileList) {
      // console.log('res', response)
      // console.log('file', file)
      // console.log('fileList', fileList)
      if (response.code === 0) {
        this.fileListVisible = true
        this.fileName = file.raw.name
        if (response.data) {
          this.excelData = response.data
        }
      } else {
        this.$refs.uploadRef.clearFiles()
        this.$message.error('上传失败，请重新上传！')
      }
    },
    uploadChange (file, fileList) {
      this.isReupload = true
      if (fileList.length > 1) {
        fileList.splice(0, 1)
        this.fileName = file.name
      }
    },
    uploadExceed (files, fileList) {

    },
    uploadError (err, file, fileList) {
      console.log('err', err)
      this.$message.error('未知错误，请稍后重试!')
    },
    uploadUrl () {
      if (this.type === 0) {
        return this.$http.adornUrl('/ent/customer/person/import')
      } else if (this.type === 1) {
        return this.$http.adornUrl('/ent/customer/ent/import')
      } else if (this.type === 2) {
        return this.$http.adornUrl('/ent/customer/cooperation/import')
      } else if (this.type === 3) {
        return this.$http.adornUrl('/ent/customer/ent/import')
      }
    },
    uploadHeader () {
      return {
        'token': Vue.cookie.get('token')
      }
    },
    downloadDataReq () {
      let fileName = ''
      if (this.type === 2) {
        fileName = 'customerCooperation.xlsx'
      } else if (this.type === 1 || this.type === 3) {
        fileName = 'entCustomer.xlsx'
      } else if (this.type === 0) {
        fileName = 'personCustomer.xlsx'
      }
      window.location.href = window.SITE_CONFIG.remoteUrl + 'others/' + fileName
    },
    clickHideResultDialog () {
      this.resultDialogVisible = false
      if (this.$listeners['refreshData']) { this.$emit('refreshData') }
    }

  },
  computed: {
    failRecords () {
      if (this.resultData) {
        return this.resultData.filter(item => item.successFlag === 0)
      }
    }
  }
}
</script>

<style lang='less' scoped>
.content{
  display: flex;
  .item{
    display: flex;
    flex-direction: column;
    align-items: center;
    border:1px solid #DDDDDD;
    border-radius:8px;
    padding: 12px 24px 24px 24px;
    margin: 15px;
    width: 240px;
    .itme-img{
      width: 60px;
      height: 70px;
      margin: 24px 0px 21px 0px;
    }
  }
}

.btn-small{
  height:32px;
  margin-right: 10px
}
.btn-normal{
  margin-right: 10px
}
.consequence{
  width: 100%;
  background-color: aqua;
  height: 45px;
  text-align: center;
  background-color: #FAFAFAFF;
  .consequence-s{
    div{
      height: 15px;
      margin-top: 15px;
    }
    .chenggong{
      width: 20px;
      color: #09AB6E;
      margin-right: 10px;
    }
    float: left;
    width: 50%;
    height: 45px;
    font-size: 15px;
    border: 1px solid #ccc;
    text-align: center;
  }
  .consequence-e{
    div{
      height: 15px;
      margin-top: 15px;
    }
    .shibai{
      width: 20px;
      color: red;
      margin-right: 10px;
    }
    float: left;
    width: 50%;
    height: 45px;
    text-align: center;
    font-size: 15px;
    border: 1px solid #ccc;
  }
}
</style>
